<!DOCTYPE html>
<html lang="en">

<!--
  Author：蓝田_Loto
  Date：2018-09-12 18:02
  PageName：b_Structure.html
  Function：伪类选择器 - 结构伪类
  URL：http://localhost:8080/d4_selector_pseudoclass/b_Structure.html
-->

<head>
    <meta charset="UTF-8">
    <title>伪类选择器 - 结构伪类</title>

    <style>
        /* 首页效果 */
        body {
            background: url(images/bg1.jpg) no-repeat;
            height: 2617px;
            width: 980px;
        }

        /* 定位栏目位置 */
        #wrap {
            position: absolute;
            width: 249px;
            height: 249px;
            z-index: 1;
            left: 712px;
            top: 201px;
        }

        /* 初始化列表结构样式 */
        #wrap ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            font-size: 12px;
            color: #777;
        }

        #wrap li {
            background: url(images/top10-bullet.png) no-repeat 2px 10px;
            padding: 1px 0px 0px 28px;
            line-height: 30px;
        }

        #wrap li a {
            text-decoration: none;
            color: #777;
        }

        #wrap li a:hover {
            color: #F63;
        }

        /* 结构伪类应用 */
        /* 设计第一个列表项前的图表为1，且数字加粗显示 */
        #wrap li:first-child {
            background-position: 2px 10px;
            font-weight: bold;
        }

        /* 单独给列表最后一项定义一个不同的样式 */
        #wrap li:last-child {
            background-position: 2px -277px;
        }

        #wrap li:nth-child(2) {
            background-position: 2px -31px;
        }

        #wrap li:nth-child(3) {
            background-position: 2px -72px;
        }

        #wrap li:nth-child(4) {
            background-position: 2px -113px;
        }

        #wrap li:nth-child(5) {
            background-position: 2px -154px;
        }

        #wrap li:nth-child(6) {
            background-position: 2px -195px;
        }

        #wrap li:nth-child(7) {
            background-position: 2px -236px;
        }

        #wrap li:nth-child(3n+1) {
            background-color: #efefef;
        }
    </style>
</head>

<body>
<div id="wrap">
    <ul id="container">
        <li><a href="#">送君千里 终须一别</a></li>
        <li><a href="#">旅行的意义</a></li>
        <li><a href="#">南师虽去，精神永存</a></li>
        <li><a href="#">榴莲糯米糍</a></li>
        <li><a href="#">阿尔及利亚 天命之年</a></li>
        <li><a href="#">白菜鸡肉粉丝包</a></li>
        <li><a href="#">《展望塔上的杀人》</a></li>
        <li><a href="#">我们，只会在路上相遇</a></li>
    </ul>
</div>
</body>
</html>
